@import '../../styles/theme.scss';

// 骨架图效果
.c_skeleton {
	position: relative;
	display: block;

	width: 100%;
	height: 100%;
	min-height: 20px;
	max-height: 340px;
	border-radius: 8px;
	margin: 0 auto;

	overflow: hidden;
	background: #f2f2f2;

	// 宽高相同
	&-size {
		&-18 {
			@include _Size(18);
			margin-right: 14px;
		}

		&-28 {
			@include _Size(28);
		}

		&-42 {
			@include _Size(42);
		}

		&-48 {
			@include _Size(48);
		}

		&-50 {
			@include _Size(50);
			border-radius: 8px;
		}

		&-60 {
			@include _Size(60);
			border-radius: 50%;
		}

		&-120 {
			@include _Size(120);
			border-radius: 12px;
		}

		&-150 {
			@include _Size(150);
			border-radius: 20px;
		}

		&-190 {
			width: 190px;
			height: 190px;
			border-radius: 14px;
		}
	}

	// 宽度
	&-width {
		&-40 {
			@include _Width(40);
		}
		&-64 {
			@include _Width(64);
		}

		&-80 {
			@include _Width(80);
		}

		&-94 {
			@include _Width(94);
		}

		&-100 {
			@include _Width(100);
		}

		&-120 {
			@include _Width(120);
		}

		&-168 {
			@include _Width(168);
		}

		&-200 {
			@include _Width(200);
		}

		&-325 {
			@include _Width(325);
		}

		&-345 {
			@include _Width(345);
		}

		&-355 {
			@include _Width(355);
			margin: 0 auto;
		}
	}

	// 高度
	&-height {
		&-26 {
			@include _LHeight(26);
		}

		&-14 {
			@include _LHeight(14);
		}
		&-16 {
			@include _LHeight(16);
		}

		&-20 {
			@include _LHeight(20);
		}
		&-22 {
			@include _LHeight(22);
		}
		&-25 {
			@include _LHeight(25);
			// margin: 0 0 8rpx 0;
		}

		&-27 {
			@include _LHeight(27);
		}
		&-28 {
			@include _LHeight(28);
		}

		&-30 {
			@include _LHeight(30);
		}

		&-44 {
			@include _LHeight(44);
		}

		&-150 {
			@include _LHeight(150);
		}
		&-170 {
			@include _LHeight(170);
		}
	}

	&:empty::after {
		position: absolute;
		display: block;

		content: '';
		width: 100%;
		height: 100%;
		transform: translateX(-100%);
		background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
		animation: loading 1.5s infinite;
	}

	@keyframes loading {
		100% {
			transform: translateX(100%);
		}
	}
}

.no-margin {
	margin: inherit;
}
